{% extends "skeleton.html" %}
{% import "issues/macros.html" as m %}

{% block header %}
  {{m.html_header(resource_version)}}
  <script src="/ckeditor/v{{resource_version}}/ckeditor.js"></script>
{% endblock %}
{% block pagetitle %}Issues &bull; New{% endblock %}
{% block title %}New Issue{% endblock %}

{% block maincontent %}
  <section class="content">
    <nav class="breadcrumbs">
      <ul>
        <li><a href="/">War Worlds</a>
        <li><a href="/issues">Issues</a>
        <li><span>New Issue</span>
      </ul>
    </nav>

    <section class="blurb">
      <p>Please try to search before reporting a duplicate issue. If you think you've found an issue that nobody else
      has reported yet, please include as much detail below as possible.</p>
    </section>

    <form method="POST" class="edit-issue">
      <fieldset>
        <legend>Overview</legend>
        <div class="issue-field">
          <label for="issue-summary">Summary:</label>
          <div class="hack"><input type="text" name="issue-summary" id="issue-summary" placeholder="Describe the issue in a short sentence." /></div>
        </div>
        <div class="issue-field issue-field-half select">
          <label for="issue-type">Type:</label>
          <select name="issue-type" id="issue-type"><option value="B">Bug</option><option value="FR">Feature Request</option><option value="P">Process</option></select>
        </div>
        <div class="issue-field issue-field-half select">
          <label for="issue-priority">Priority:</label>
          <select name="issue-priority" id="issue-priority">
            <option value="1">1 - Game Unplayable</option>
            <option value="2" selected>2 - Normal</option>
            <option value="3">3 - Cosmetic</option>
          </select>
        </div>
        <div class="issue-field issue-field-wysiwyg">
          <label for="issue-description">Description:</label>
          <div class="hack"><textarea name="issue-description" id="issue-description"></textarea></div>
        </div>
      </fieldset>
      <div class="input-button"><input type="submit" value="Create Issue" /></input>
    </form>
  </section>
  <script>
    $(function() {
      var editor = CKEDITOR.replace("issue-description");
      var $container = $("fieldset div.issue-field-wysiwyg div.hack");

      CKEDITOR.on("instanceReady", function() {
        editor.resize($container.width(), $container.height());
      });
      $(window).resize(function() {
        editor.resize($container.width(), $container.height());
      });

      var changed = false;
      var saving = false;
      editor.on("change", function() {
        changed = true;
      });
      $("form").on("submit", function() {
        saving = true;
      });
      $(window).on("beforeunload", function() {
        if (changed && !saving) {
          return "You have unsaved changes.";
        }
      });
    });
  </script>
{% endblock %}
